原生的 Ajax 请求

原生的 Ajax 请求

对于来自 JavaScript 的网络请求，有一个总称术语 “AJAX”（Asynchronous JavaScript And XML 的简称）。虽然不再使用 XML：这个术语诞生于很久以前，所以这个词一直在那儿。

处理原生Ajax

发送多个请求

function queryData(url) {
  let p = new Promise((resolve, reject) => {
    // 先创建一个 XMLHTTPRequest 对象
    let xhr = new XMLHttpRequest();
    xhr.onreadystatechange = () => {
      if (xhr.readyState != 4) return;

      if (xhr.status == 200) {
        resolve(xhr.responseText);

      } else {
        reject('出错了');
      }
    }

    xhr.open('get', url);
    xhr.send(null);
  })

  return p;
}


// 发送多次请求
queryData("http://localhost:3000/data")
  .then(data => {
    console.log(data);
    return queryData("http://localhost:3000/data");
  })
  .then(data => {
    console.log(data);
    return queryData("http://localhost:3000/data");
  })
  .then(data => {
    console.log(data);
    return queryData("http://localhost:3000/data");
  })
  .then(data => {
    console.log(data);
    return queryData("http://localhost:3000/data");
  })
  .then(data => {
    console.log(data);
    return queryData("http://localhost:3000/data");
  })

jQuery 的方式

一般不用这个，因为包还是太大了 这里只写一个ajax的例子

$.ajax({
  url:'hello/testajax', //请求的地址
  type:'post',
  data:'id='+数据, //在servlet就可以通过 req.getParameter('id')来取得
  dataType:'json',
  //处理以前需要做的功能 
  beforeSubmit : function() {
    $("tipMsg").text("数据正在保存，请稍候..."); 
    $("#insertBtn").attr("disabled", true); 
   },
  //请求成功的回调函数，
  success:function(data){
      console.log(data);
      let names = '';
      let details = '';
      // 解析数组,注意这里有个坑，必须给let i = 0声明初始值
      for(let i = 0; i < data.length;i++){
          names += "<h4>书名：" + data[i].bookName + "</h4>";
          details += "<h4>介绍：" + data[i].detail + "</h4>";
      }
      $('#book-name').append(names);
      $('#book-detail').append(details);
  },
  //请求失败，包含具体的错误信息
  error : function(e){
      console.log(e.status);
      console.log(e.responseText);
  }
})

现在主流的做法已经不是 jQuery 了 而是使用下面的两个

• fetch：Fetch API 就是 浏览器提供（ES6）的用来代替 jQuery.ajax 的工具，但是还是有很多问题，所以一般用 axios
• axios：Vue 比较常用的一个异步通信框架，不只是浏览器可以用，NodeJS上也可以